<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 600px;
				height: 400px;
				border: 1px solid #b6b6b6;
				margin: 100px auto;
				position: relative;
			}
			
			.container ul li {
				list-style-type: none;
				width: 600px;
				height: 400px;
				transition: 1s;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}
			
			.container ul li.show {
				opacity: 1;
			}
			
			.container ul li img {
				width: 100%;
				height: 100%;
			}
			
			.btn {
				position: absolute;
				z-index: 100;
				width: 600px;
				height: 30px;
				display: flex;
				bottom: 5%;
				justify-content: center;
			}
			
			.btn span {
				width: 30px;
				height: 30px;
				display: block;
				border-radius: 50%;
				background: #f99;
				opacity: 0.8;
			}
			
			.btn i {
				width: 20px;
				height: 20px;
			}
			
			.btn span.active {
				background: red;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<ul id="box">
				<a href="#javascript">
					<li class="show">
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487161953058&di=fc5f3f927a478b1a63f6316924bf7667&imgtype=0&src=http%3A%2F%2Fwww.wallcoo.com%2Fanimal%2FMX069_Pretty_Puppies_puppy_garden_adventure%2Fwallpapers%2F1280x1024%2FGarden_adventure_of_the_little_puppy_photos_pictures_puppy_MIL56003.jpg" alt="1111">
					</li>
				</a>
				<a href="#javascript">
					<li>
						<img src="http://www.wallcoo.com/animal/Pet-Miniature-Schnauzer/wallpapers/1280x1024/Miniature-Schnauzer-puppy-photo-83448_wallcoo.com.jpg" alt="22222">
					</li>
				</a>
				<a href="#javascript">
					<li>
						<img src="http://tupian.enterdesk.com/2012/0831/zyz/04/1345599339UDIPTP.jpg" alt="33333">
					</li>
				</a>
			</ul>

			<div class="btn" id="btn">
				<span class="active"></span><i></i>
				<span></span><i></i>
				<span></span><i></i>
			</div>

		</div>

	</body>
	<script>
		window.onload = function(){
			var oul = document.getElementById("box");
			var oli = oul.getElementsByTagName("li")
			
			var obtnspan = (document.getElementById("btn")).getElementsByTagName("span");
			console.log(obtnspan);
			for (var i = 0;i< obtnspan.length;i++) {
			 	obtnspan[i].num = i;
			 	
			 	obtnspan[i].onclick = function(){
			 		for (var j =0;j<obtnspan.length;j++) {
			 			obtnspan[j].className = "";	
			 			oli[j].className = "";
			 		}
			 		this.className ="active";
			 		oli[this.num].className ="show";			 		
			 	}
			}
			console.log(obtnspan);
		}
		
		
		
		
		
		
		
	</script>

</html>